<template>
	<div class="home">
		<el-container style="height: 100vh;">
			<el-aside width="" style="overflow-x: hidden;height: 100%;">
				<!-- 左边的导航菜单 -->
				<el-scrollbar class="aside_scroll" ref="scrollMenuRef">
					<el-menu :default-active="$route.path" @open="handleOpen" @close="handleClose"
						:collapse="isCollapse" background-color="#304156" class="el-menu-vertical-demo"
						text-color="#fff" active-text-color="#ffd04b" router>
						<el-menu-item index="/homeIndex">
							<i class="el-icon-s-home"></i>
							<span slot="title">首页</span>
						</el-menu-item>

						<el-submenu v-for="(item,index) in getRoutes" :index="item.path">
							<template slot="title">
								<i :class="item.meta.icon"></i>
								<span slot="title">{{item.meta.title}}</span>
							</template>
							<!-- v-if="item2.hidden!=true" -->
							<el-menu-item-group v-for="(item2,index) in item.children">
								<el-menu-item v-if="item2.hidden!=true" :index="item.path+'/'+item2.path">{{item2.meta.title}}</el-menu-item>
							</el-menu-item-group>
						</el-submenu>
					</el-menu>
				</el-scrollbar>
			</el-aside>
			<el-container>
				<el-header>
					<div id="el-header-content">
						<div class="el-header-navbar">
							<div class="el-header-img" @click="changeNav">
								<!-- 标记 -->
								<img src="../assets/logo.png" :class="isCollapse?'recover':'rotate'" />
							</div>
							<div class="el-header-brd">
								<el-breadcrumb separator-class="el-icon-arrow-right">
									<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
									<!-- <el-breadcrumb-item>活动管理</el-breadcrumb-item>-->
									<!-- 这里进行动态获取路由 -->
									<el-breadcrumb-item v-for="(item,index) in arryBread" v-if="arryBread.length!=0">
										{{item}}

									</el-breadcrumb-item>

								</el-breadcrumb>

							</div>

							<div class="about">
								<i class="el-icon-full-screen"></i>
								<i class="el-icon-rank"></i>
								<i class="el-icon-bell"></i>
								<el-dropdown>
									<span class="el-dropdown-link">
										<img :src="avatar" /><i class="el-icon-arrow-down el-icon--right"></i>
									</span>
									<el-dropdown-menu slot="dropdown">
										<el-dropdown-item>首页</el-dropdown-item>
										<el-dropdown-item>密码修改</el-dropdown-item>
										<el-dropdown-item @click.native="exit">退出</el-dropdown-item>
									</el-dropdown-menu>
								</el-dropdown>
							</div>


						</div>

						<div class="el-header-bread">

							<TagMenu :parentMsg="title"></TagMenu>

						</div>

					</div>

				</el-header>
				<el-main>
					<!-- 这里进行内容的显示 -->
					<router-view>


					</router-view>


				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script>
	import TagMenu from "../components/tag/Tag.vue"
	import {
		asyncRouterMap
	} from '../utils/dynamic'
	// import TagMenu from "../components/ccc.vue"
	// import * as aa from '../assets/permisson.js'
	export default {
		name: "Home",
		data() {
			return {
				//屏幕的宽度 
				screenWidth: '',
				// 登录的头像，
				avatar: '',
				// 是否全部折叠展开
				isCollapse: false,
				// menuList:global.antRouter,
				// tesMenu:asyncRouterMap,
				// 左边的菜单加上路由
				// 这里就写面包屑导航的功能模块吧
				// 显示数组
				arryBread: [],
				// 传递给子元素的数据，
				// titles: "",
				// // 父组件传递子组件的标题
				title: {


				},


			}
		},
		// 使用计算属性
		computed: {
			getRoutes() {
				// 这里应该对其中数组为零的进行过滤
				let arry = global.antRouter.filter((currentValue, index) => {
					if (currentValue.children.length != 0 && currentValue.path != "/profile") {
						return currentValue
					}

				})

				return arry
			}
		},
		components: {
			TagMenu
		},
		methods: {
			exit() {
				// alert('button click');
				//退出登录
				this.axios.post('http://192.168.1.54:8080/admin/auth/logout',{
					headers:{
						"token":this.Cookies.get("token")
					}
				}).then((res)=>{
					// 跳转到登录页的时候顺便刷新
					// window.location.href = window.location.origin + window.location.pathname
					// this.$router.go(-2)
					console.log(res,"退出登录")
					// 清除临时存储
					sessionStorage.clear()
					// 清除cooike
					this.Cookies.remove("token")
					// if (this.Cookies.get("checked")!="true") {
					// 	this.Cookies.remove("username")
					// 	this.Cookies.remove("password")
					// } 
						// this.Cookies.remove("username")
						// this.Cookies.remove("password")
					
					window.location.href ='http://localhost:8080/login'

				}).catch((err)=>{
					
				})
				
				
			},

			handleOpen(key, keyPath) {
				console.log(key, keyPath);
			},
			handleClose(key, keyPath) {
				console.log(key, keyPath);
			},
			// 展开和收缩
			changeNav() {
				// console.log("收缩一下侧边栏")
				this.isCollapse = !this.isCollapse
			},
			//解决刷新数据消失的bug
			rescue() {
				// 刷新时没有传递值导致刷新啥也没有
				if (this.$route.fullPath !== "/homeIndex") {
					this.title = this.$route
					// console.log(this.$route)
					for (let i = 1; i < this.$route.matched.length; i++) {
						this.arryBread.push(this.$route.matched[i].meta.title)
					}
					console.log("刷新完成")
				} else {
					this.title = this.$route
					console.log("刷新后的title", this.title)

				}
			},

			/* 			// 页面滚动时触发
						scrollContent() {
							// scrollTop为显示屏顶部与整个文档顶部间的距离
							let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
							// 页面滚动条滚动时，el-scrollbar内滚动条按比例跟随一起滚动
							this.$refs.scrollMenuRef.wrap.scrollTop = scrollTop / document.body.scrollHeight * this.$refs.scrollMenuRef
								.wrap.scrollHeight
						},

						// el-scrollbar内滚动条滚动时，打印滚动条向下滚动的距离
						scrollMenu() {
							console.log(this.$refs.scrollMenuRef.wrap.scrollTop)
						},
			 */
		},

		mounted() {
			
			
			this.rescue()
			// 取出数据
			// 将字符串转换成对象
			let user = JSON.parse(sessionStorage.getItem("user"))
			this.avatar = user.avatar
			// console.log("我是头像路径", this.avatar)


			// 监听浏览器的变化
			this.screenWidth = document.body.clientWidth;
			window.onresize = () => {
				if (this.screenWidth < 1000) {
					this.isCollapse = true
				} else {
					this.isCollapse = false
				}
				return (() => {
					this.screenWidth = document.body.clientWidth;
					console.log("收缩触发了", this.screenWidth)

				})();
			};

			// 监听浏览器/页面滚动条的滚动
			// window.addEventListener("scroll", this.scrollContent);
		},

		watch: {


			// 监听变化的路由
			$route(to, from) {
				// 打印发现要获取的是match
				// console.log(to)
				// console.log(to.matched)
				// 添加之前清空
				this.arryBread.length = 0
				// 这个需要传递给组件的数据
				if (from.path === '/redirect') {
					// console.log("耻辱", to)
					// 这里进行面包屑的绑定
					for (let i = 1; i < to.matched.length; i++) {
						this.arryBread.push(to.matched[i].meta.title)
					}

				} else {
					this.title = to
					// this.title = to
					// console.log("我是", from)
					// this.title = this.titles
					// console.log(to.fullPath)
					if (to.path !== "/homeIndex") {
						for (let i = 1; i < to.matched.length; i++) {

							this.arryBread.push(to.matched[i].meta.title)

						}
					}


				}


				console.log(this.arryBread, '面包屑')
				// console.log(this.titles)
			}
		},
		created() {
			console.log("这是我导入的数据", this.getRoutes)

		}
	};
</script>
<style scoped="scoped">
	.scrollMenuBox {
		width: 500px;
		height: 40px;
		border: #409EFF solid 1px;
		/* overflow: overlay; */
		/* overflow: auto; */
	}

	/* 图片旋转 */
	.rotate {
		transform: rotate(-90deg);
		transition: all 0.5s;
	}

	.recover {
		transition: all 0.5s;
	}

	.el-aside {
		background-color: #304156;
		/* color: #fff;  */
		text-align: left;
		line-height: 200px;
		height: 100%;


	}

	.el-main {
		background-color: #E9EEF3;
		color: #333;
		/* text-align: center; */
		/* line-height: 160px; */
	}

	/* 	body>.el-container {
		height: 100vh;
	} */


	/* 左边菜单栏的样式 */

	.el-menu-vertical-demo {
		/* width: 220px; */
	}

	/* 取消了  失效还是得看deep*/
	/deep/ .el-menu-item-group__title {
		display: none;
	}

	/* 悬停改变颜色 */
	/* .el-menu-item:focus, .el-menu-item:hover{
		background-color: aqua !important;
	} */
	/deep/.el-submenu__title {
		width: 200px;
	}

	.el-menu-item-group {
		background-color: #ffff00 !important;
	}

	/* 自己添加滚动条 */
	.aside_scroll {
		height: 100%;
	}

	/deep/.el-scrollbar__wrap {
		overflow-x: hidden;
	}

	/* 头部的样式 */
	/deep/ .el-header {
		height: 100px !important;
		border: #FFFF00 1px solid;
		padding: 0px;
	}

	/* 顶部的内容加样式 */
	#el-header-content {
		height: 100%;
		display: flex;
		flex-direction: column;
		padding: 0px 10px;
		/* flex: 1; */
	}

	/*上部分 */
	#el-header-content .el-header-navbar {
		line-height: 60px;
		min-width: 580px;
		overflow: hidden;
	}

	/* 下部分 */
	#el-header-content .el-header-bread {
		flex: 1;
		display: flex;
		align-items: center;
		border: #283443 1px solid;
	}

	/* 上部分的图片 */
	.el-header-img,
	.el-header-brd,
	.about {

		display: inline-block;
		/* display: inline-flex; */

		/* justify-content: center; */
		/* align-items: center; */
		padding-right: 20px;



	}

	.el-header-img {
		width: 40px;
		line-height: 60px;

	}

	.el-header-img img {
		width: 30px;
		vertical-align: middle;

		/* height: 100%; */
		/* padding-right: 30px; */

	}

	/* 上面右边的东西怎 */
	.about {
		/* margin-right: 0px; */
		float: right;
		width: 250px;
		height: 60px;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	/* 下拉菜单的样式 */
	.el-dropdown-link {
		cursor: pointer;
		color: #409EFF;
		/* line-height: 40px; */
	}

	.el-dropdown-link img {
		width: 40px;
		height: 40px;
		margin-top: 15px;
		border-radius: 5px;

	}

	.el-icon-arrow-down {
		font-size: 12px;
	}

	.el-menu-vertical-demo:not(.el-menu--collapse) {
		/* 解决卡顿现象 */
		width: 200px;
		min-height: 400px;
	}
</style>
